<template>
  <b-container fluid class="modal-dialog" style="margin-top: 35%;">
  <b-form @submit="onSubmit" v-if="show">
        <div class="modal-content">
            <div class="modal-header custom-info">
 
                <h4 class="modal-title text-center text-white" id="myModalLabel">欢迎您</h4>
            </div>

            <div class="modal-body" id = "model-body">
                <div class="form-group">
 <b-form-group id="input-group-category">
          <b-form-select
            id="input-category"
            required
            v-model="form.category"
            :options="departments"
          ></b-form-select>
        </b-form-group>

                    <b-form-input
          id="input-2"
          v-model="form.name"
          required
          placeholder="请输入姓名"
        ></b-form-input>
                </div>
                <div class="form-group">
 
                    <b-form-input
          id="input-4"
          v-model="form.phone"
          required
          type='tel'
          placeholder="请输入手机号"
          @change="tel"
        ></b-form-input>

                </div>
            </div>

            <div class="modal-footer">
                <div class="form-group">
                    <b-button type="submit" class="btn btn-primary form-control">登录</b-button>
                </div>
            </div>
        </div><!-- /.modal-content -->
      </b-form>
  </b-container>
</template>

<script>
  export default {
    name:'Login',
    data() {
      return {
      form: {
          category: '',
          name: null,
          phone: null,
        },
        show:true,
      categories: [{ text: '请选择所在单位', value: ''}, '行政部', '财务部', '后勤部门','其他'],
      departments:[{ text: '请选择所在单位', value: ''}],
      }
    },
    beforeCreate: async function() {
      if(this.$cookies.get('login')&&this.$cookies.get('form')){
        this.$router.push({ name: 'home', query: this.$cookies.get('form') })
      }
      await this.$tcb.auth({ persistence: "local" }).anonymousAuthProvider().signIn()
      this.$root.$data.db = this.$tcb.database()
      const db = this.$tcb.database()
      await db.collection('basic').where({
        name:'department'
      }).get().then(res=>{
        //console.log(res)
        res.data[0].value.forEach(department=>{
          this.departments.push({text: department, value: department})
        })
      })
      //console.log("1",this.$root.$data.basic)
                    // 组件创建之后
                    // 使用该组件，就会调用created方法 在created这个方法中可以操作后端的数据，数据响应视图
                    // 应用： 发起ajax请求
      //console.log('登录状态：',this.$cookies.get('login'));
    },
    methods: {
    onSubmit(evt) {
        evt.preventDefault()
  //首次登录
  this.$cookies.set('login','true','2y')
  this.$cookies.set('form',this.form,'2y')
  this.$router.push({ name: 'home', query: this.form })
  //console.log(this.$cookies.get('form'))
  //获取参数
  //数据请求
  //结果反馈
  //修改参数
      },
      tel(){
      if (!/^1[345789]\d{9}$/.test(this.form.phone)) {
        alert("请输入正确的手机号");
        this.form.phone = "";
      }
      }

    }
  }
</script>